<template>
  <view class="my-page">
    <view class="avatar-nickname">
      <view class="nickname">
        <view class="message">
          <view v-if="user?.id"
            class="headers"
            :style="{ backgroundImage: `url(${user?.headimg})` }"
          ></view>
		  <view v-else
		    class="headers"
			@click="toPath('/wuLian/pages/login')"
		  ></view>
          <view class="yongHuMing">
            <view v-if="user?.id">{{ user.customer_name }}</view>
            <view v-else @click="toPath('/wuLian/pages/login')">登录</view>
          </view>
        </view>
        <view class="iconImg"> </view>
      </view>
    </view>

    <view class="sectionBox">
      <!-- 我的订单部分 -->
      <view class="section">
        <view class="section-title">
          <view class=""> 我的订单 </view>
          <view class=""> </view>
        </view>
        <view class="grid-container">
          <view
            class="grid-item"
            @click="toPath('/mine/pages/callMsg?tab=all&status=')"
          >
            <view class="grid-img wddd"> </view>
            <view class="grid-text">我的订单</view>
          </view>
          <view
            class="grid-item"
            @click="toPath('/mine/pages/callMsg?tab=ybj&status=0')"
          >
            <view class="grid-img ybj"> </view>
            <view class="grid-text">已提交</view>
          </view>
          <view
            class="grid-item"
            @click="toPath('/mine/pages/callMsg?tab=ycj&status=1')"
          >
            <view class="grid-img ycj"> </view>
            <view class="grid-text">已回复</view>
          </view>
          <!-- <view
            class="grid-item"
            @click="toPath('/mine/pages/callMsg?tab=wcj&status=2')"
          >
            <view class="grid-img wcj"> </view>
            <view class="grid-text">未成交</view>
          </view> -->
        </view>
      </view>

      <!-- 客户服务部分 -->
      <view class="section">
        <view class="section-title">
          <view class=""> 客户服务 </view>
        </view>
        <view class="grid-container">
          <view class="grid-item">
            <button open-type="contact" class="btnContact grid-item">
              <view class="grid-img qywx"> </view>
              <view class="grid-text" style="margin-top: 10rpx; color: #000"
                >企业微信</view
              >
            </button>
          </view>
          <view class="grid-item" @click="opCall">
            <view class="grid-img kfdh"> </view>
            <view class="grid-text">客服电话</view>
          </view>
        </view>
      </view>

      <!-- 客户反馈部分 -->
      <view class="section">
        <view class="section-title">客户反馈</view>
        <view class="grid-container">
          <view class="grid-item" @click="toPath('/mine/pages/fanKui/index')">
            <view class="grid-img wtfk"> </view>
            <view class="grid-text">我的反馈</view>
          </view>
          <view class="grid-item" @click="toPath('/mine/pages/fanKui/result')">
            <view class="grid-img fkcx"> </view>
            <view class="grid-text">反馈查询</view>
          </view>
        </view>
      </view>
      <!-- <view class="section">
        <view class="section-title">我的配置</view>
        <view class="grid-container">
          <view class="grid-item">
            <view class="grid-img ldzj"> </view>
            <view
              class="grid-text"
              @click="toPath('/wuLian/pages/louDianZiJian')"
              >漏电自检</view
            >
          </view>
        </view>
      </view> -->
    </view>
  </view>
  <view class="logoutBox">
    <button @click="logout" v-if="user?.id" class="logout">退出登录</button>
  </view>
  <uni-popup ref="callDom" type="dialog">
    <uni-popup-dialog
      :type="success"
      cancelText="关闭"
      confirmText="确定"
      title="联系方式"
      @confirm="dialogConfirm"
      @close="dialogClose"
    >
      <rich-text :nodes="callMsg"></rich-text>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script setup>
import { ref } from "vue";
// 定义图片地址，这里先使用空字符串，实际使用中替换为真实图片地址
import { getUser,clearUser } from "@/utils/token";
import { getContact } from "@/api/user.js";
import { onShow } from "@dcloudio/uni-app"
const user = ref({})
const loginFlag = ref(false);
 onShow(()=>{
	user.value = getUser();
	if (user?.id) {
	  loginFlag.value = true;
	} 
 })
function toPath(path) {
  if (loginFlag.value) {
    uni.navigateTo({
      url: path,
    });
  } else {
    uni.showToast({
      title: "请先登录",
	  icon:"error"
    });
	uni.navigateTo({
	  url: path,
	});
  }
}
const callMsg = ref("");
const callDom = ref();
// getContact
function opCall() {
  getContact().then((e) => {
    callMsg.value = e.data.content;
    callDom.value.open();
  });
}

function dialogConfirm() {}

function dialogClose() {}

function logout(){
	clearUser()
}
</script>

<style scoped>
.ybj {
  background-image: url("/static/ybj.png");
}
.wtfk {
  background-image: url("/static/wtfk.png");
}

.wddd {
  background-image: url("/static/wddd.png");
}

.kfdh {
  background-image: url("/static/kfdh.png");
}

.ldzj {
  background-image: url("/static/ldzj.png");
}
.fkcx {
  background-image: url("/static/fkcx.png");
}
.qywx {
  background-image: url("/static/qywx.png");
}
.wcj {
  background-image: url("/static/wcj.png");
}
.ycj {
  background-image: url("/static/ycj.png");
}
.btnContact {
  padding: 0;
  background: none;
  border: none;
  line-height: 1;
  color: #000;
}
.logoutBox {
  padding: 20rpx;
  background-color: #f5f5f5;
}
.btnContact::after {
  display: none;
}

.headers {
  width: 120rpx;
  height: 120rpx;
  background-color: #ccc;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.my-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  overflow-y: auto;
  position: relative;
}

.avatar-nickname {
  height: 200px;
  display: flex;
  align-items: center;
  margin-bottom: 50rpx;
  background-color: #e60012;
  color: white;
  position: relative;
}

.nickname {
  width: 100%;
  height: 180rpx;
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.message {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
}

.yongHuMing {
  margin-left: 20rpx;
}

.sectionBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 280rpx;
  overflow-y: auto;
}

.section {
  width: 90%;
  margin-bottom: 20rpx;
  background-color: white;
  padding: 20rpx;
  margin: 20rpx auto;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.section-title {
  /* font-size: 36rpx; */
  /* font-weight: bold; */
  width: 95%;
  margin: 0rpx auto;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10rpx;
  color: #000;
}

.grid-container {
  display: grid;
  margin-top: 50rpx;
  margin-left: 20rpx;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-item {
  width: 120rpx;
  margin-bottom: 20rpx;
  /* text-align: center;
		margin: 0 30rpx; */
}

.grid-img {
  width: 100%;
  height: 80rpx;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.grid-text {
  width: 120rpx;
  text-align: center;
  font-size: 28rpx;
  /* color: #ccc; */
}
.logout {
  background-color: #e60012;
  color: white;
  font-size: 26rpx;
  margin-bottom: 40rpx;
}
</style>
